<template>
  <div class="image-upload">
    <!--
    action: 设置默认上传文件的请求地址
    http-request：自定义上传图片，用于覆盖action属性
    file-list：文件上传列表，主要作用 用于图片回显
    -->
    <el-upload
      :class="{
        disable:
          (imgType === 'image' && fileList.length > 0) ||
          (imgType === 'photos' && fileList.length > 2),
      }"
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :file-list="fileList"
      :on-remove="removeFn"
    >
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
// 腾讯云图像上传
var COS = require("cos-js-sdk-v5");

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: "AKIDUmpfFXZKo0zi9JCo9CyUkiPpyqRknY2E",
  SecretKey: "xd18zZsuCH5dttc3D6j5AxUlmX3JJ3bu",
});
export default {
  props: {
    imgType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 上传的图片列表
      fileList: [],
      percent: 0,
      showProgress: false,
    };
  },
  methods: {
    // 删除图片
    removeFn(val) {
      this.fileList = this.fileList.filter((item) => {
        if (item.uid !== val.uid) {
          return item;
        }
      });
      console.log(this.fileList);
    },
    // 上传图片时触发
    uploadFn(file) {
      // console.log('58', file)
      const fileName = file.file.name;
      // 腾讯云上传对象函数
      cos.putObject(
        {
          Bucket: "hr-project-73-1311280018" /* 填入您自己的存储桶，必须字段 */,
          Region: "ap-nanjing" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key: fileName /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段也就是上传后的文件名称 */,
          StorageClass: "STANDARD",
          Body: file.file, // 上传文件对象
          onProgress: (progressData) => {
            // console.log(JSON.stringify(progressData)) // 返回的对象中percent显示的是上传的进度，百分比
          },
        },
        (err, data) => {
          if (err) {
            console.log("err", err);
            return this.$message.error("上传图片失败");
          }
          // console.log('data', data)
          this.$nextTick(() => {
            this.fileList.push({
              url: "https://" + data.Location,
              status: "success",
            });
          });
          // 隐藏进度条
          // this.showProgress = false
        }
      );
    },
  },
};
</script>

<style lang="scss" >
// 防止闪烁
.el-upload-list__item.is-ready {
  display: none;
}
.image-upload {
  display: inline-block;
  .disable {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
